<template>
  <div class='randoms-container'>

    <!-- 头部区域 -->
    <div class="random-header">
      <el-form ref="randomFormRef" :model="randomForm"   label-width="80px" class="random-form">
      <!-- 左侧表单区域 -->
        <div>
          <el-form-item label="关键字"  >
            <el-input  class="random-form-input" v-model="queryInfo.keyword"></el-input>
          </el-form-item>
        </div>
        <!-- 右侧按钮区域 -->
        <div>
          <el-button size="small" @click="clearRandomInput">清除</el-button>
          <el-button size="small" type="primary" @click="searchRandom">搜索</el-button>
        </div>     
      </el-form>
    </div>


    <!-- 提示信息 -->
     <el-alert :title="`数据一共${this.total}条`" type="info" show-icon :closable="false" class="alert-info"></el-alert>


    <!-- 表格区域 -->
    <el-table :data="randomList" style="width: 100%" class="random-table">
      <el-table-column prop="id" label="编号" width="220"></el-table-column>
      <el-table-column prop="questionType" label="题型" width="85">
         <template slot-scope="scope">
           <span v-if="scope.row.questionType === '1'">单选</span>
           <span v-else-if="scope.row.questionType === '2'">多选</span>
           <span v-else>简答</span>
         </template>
      </el-table-column>

      <el-table-column prop="questionIDs" label="题目编号" class="random-questions" >
        <template slot-scope="scope">
          <el-link :underline="false" type="primary" @click="previewRandom(scope.row,index)" v-for="(item, index) in scope.row.questionIDs" :key="index">{{item.number}}</el-link>
        </template>
      </el-table-column>
      <el-table-column prop="addTime" label="录入时间" width="170"></el-table-column>
      <el-table-column prop="totalSeconds" label="答题时间(s)" width="115"></el-table-column>
      <el-table-column prop="accuracyRate" label="正确率(%)" width="100"></el-table-column>
      <el-table-column prop="userName" label="录入人" width="85"></el-table-column>
      <el-table-column  label="操作" width="85">
        <template slot-scope="scope">
          <el-button type="danger" icon="el-icon-delete" circle plain zize="mini" @click="removeRandom(scope.row)" ></el-button>
          <!-- @mouseup="mouseUpColorBack" -->
        </template>
      </el-table-column>
    </el-table>


    <!-- 分区区域 -->
     <div class="random-pagination">
       <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryInfo.page" :page-sizes="[ 20, 30, 50, 100]" :page-size="queryInfo.pagesize" layout="prev, pager, next, sizes,jumper" :total="total" background  ></el-pagination>
    </div>


     <!-- 预览弹窗 -->
    <el-dialog  title="题目预览" :visible.sync="previewRandomDialogVisible" width="900px" class="preview-random-dialog-header preview-random-dialog" :before-close="previewRandomDialogClose">
      <el-row class="common-row">
        <el-col :span="6">
          【题型】：
          <span v-if="previewList.questionType == 1">单选题</span>
          <span v-else-if="previewList.questionType == 2">多选题</span>    
          <span v-else>简答题</span>    
        </el-col>
        <el-col :span="6">【编号】：{{previewList.id}}</el-col>
        <el-col :span="6">
          【难度】：
          <span v-if="previewList.difficulty == 1">简单题</span>
          <span v-else-if="previewList.difficulty == 2">中等题</span>    
          <span v-else>困难</span> 
        </el-col>
        <el-col :span="6">【标签】：{{previewList.tags}}</el-col>
      </el-row>

      <el-row class="common-row">
        <el-col :span="6">【学科】：{{previewList.subjectName}}</el-col>
        <el-col :span="6">【目录】：{{previewList.catalogID}}</el-col>
        <el-col :span="6">【方向】：{{previewList.direction}}</el-col>
        <el-col :span="6"></el-col>
      </el-row>
      <hr>
      <el-row>
        <el-col :span="24">
          【题干】：<br>
          <el-link class="preview-question-link" type="primary" :underline="false" v-html="previewList.question"></el-link>
        </el-col>
      </el-row>

      <!-- 题干区域 -->
      <el-row>
        <el-col :span="24">
          选项：（以下选中的选项为正确答案）
          <br>
          <el-form>
            <el-form-item v-if="previewQuestionType ==1 " >
              <el-radio  class="preview-checkbox disabled-pointed" v-for="item in previewList.options" :key="item.id" v-model="item.isRight" :label="1">{{item.title}}</el-radio>
            </el-form-item>
            <el-form-item  v-else>
              <el-checkbox  class="preview-checkbox disabled-pointed" v-for="item in previewList.options" :key="item.id" :checked="item.isRight===1">{{item.title}}</el-checkbox>
            </el-form-item>
          </el-form>         
        </el-col>
      </el-row>     
      <hr>

      <el-row>
        <el-col :span="24">
          【参考答案】：
          <el-button type="danger" size="small" @click="referenceAnswer = true">视频答案预览</el-button>
          <div class="reference-answer" v-if="referenceAnswer === true" >
            <video class="reference-video" :src="previewList.videoURL" controls width="100%" height="100%" autoplay ></video>
          </div>
        </el-col>
      </el-row>

      <hr>
      <el-row>
        <el-col :span="24">
          【答案解析】：<el-link type="info" :underline="false" v-html="previewList.answer"></el-link>
        </el-col>
      </el-row>
      <hr>
      <el-row>
        <el-col :span="24">
          【题目备注】：<el-link type="info" :underline="false" v-html="previewList.remarks"></el-link>
        </el-col>
      </el-row>
      

      <span slot="footer" class="dialog-footern preview-random-dialog-footer">
        <el-button type="primary" @click="previewRandomDialogClose">关闭</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
// 导入request请求
import {randoms, removeRandoms,detail, list } from '../../api/hmmm/questions.js'
export default {
  data() {
    return {
      checkList: ['选中且禁用','复选框 A', '复选框 B'],
      // 获取到的数据
      queryInfo:{
        keyword:'',
        pagesize:20,
        page:1.
      },
      //表单
      randomForm:{},
      //数据列表
      randomList:[],
      //总数据条数
      total:0,
      //预览弹窗
      previewRandomDialogVisible:false,
      //弹窗 单选题 form表单
      form:{
        resource:''
      },
      //弹框 复选框
      checkList:[],
      //预览时 数据存储容器
      previewList:[],
      //预览前判断，预览类型
      previewQuestionType:1,
      //控制 参考答案的视频盒子 ，显示与影藏
      referenceAnswer: false


    }
  },
  methods: {
    // mouseUpColorBack() {
    //   console.log(78457847584);
    // },
    //获取组题列表 
    async getRandomList () {
      try {
        const data= await  randoms(this.queryInfo)
        if (data.status !==200) return this.$message.success('获取组题列表失败！')
        this.total=data.data.counts
        this.randomList=data.data.items 
        // this.$message.success('获取组题列表成功！')
      }catch(err) {
        this.$message.error('请求失败！')
      }
      console.log(this.queryInfo);
    },
    
    //清空搜索的输入框， 并加载全部数据，并返回第一页
    clearRandomInput() {
      this.queryInfo.keyword =''
      this.queryInfo.page = 1
      console.log(this.queryInfo.page);
      this.getRandomList()
    },
    
    //搜索框搜索， 搜索完毕后展示数据返回第一页
    searchRandom() {
      this.queryInfo.page = 1
      this.getRandomList()
    },
    
    //题目预览，接收题目类型，展示不同题目对话框
    async previewRandom(questionInfo,index) {  
      const currentData = questionInfo.questionIDs[index]
      const res = await detail(currentData)
      console.log(res);
      this.previewList = res.data
      this.previewQuestionType=res.data.questionType
      if(this.previewQuestionType == 2){
      }
      this.previewRandomDialogVisible= true
    },
    previewChange(data) {
      console.log('previewChange');
      console.log(data);
      // this.previewRandom(questionInfo,index)
    },
    
    //关闭预览对话框事件， 并且 重置显示视频的开关
    previewRandomDialogClose() {
      this.previewRandomDialogVisible=false
      this.referenceAnswer=false
    },
    
    //移除组题事件
    async removeRandom(data) {
      const confirm = await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).catch(err=>err) 
        if(confirm !== 'confirm') return this.$message.info('用户已取消删除！')
        // 开始删除逻辑
        try {         
          const res =await removeRandoms(data)
          if (res.status !==200) return this.$message.error('删除失败！')
             
          this.$message.success('删除成功！')
        }catch (err) {
          this.$message.error('删除失败！')
        }
        
        //当 当前页只有一条数据时,且该页不是第一页，该数据被删除时，自动跳转到前一页
          if (this.randomList.length ===1 && this.queryInfo.page>1)  {
            this.queryInfo.page--
          }  
          this.getRandomList()       
    },
    
    //当前页码改变的处理程序
    handleCurrentChange(val) {
      this.queryInfo.page=val
      console.log(this.queryInfo.keyword);
      // if(this.queryInfo.keyword !== '') {
      //   this.searchRandom()
      // }
       console.log(this.queryInfo.page)
       console.log(this.total / this.pagesize);
      // if (this.queryInfo.page > this.total/this.pagesize)
      this.getRandomList()
      // console.log(this.queryInfo.page);
      // console.log(val);
    },
    
    //每页显示数据条数改变
    handleSizeChange(val) {
      this.queryInfo.page = 1
      this.queryInfo.pagesize=val
      this.getRandomList()
    },
  

  },
  created () {
    //获取组题列表
    this.getRandomList()
  }
}
</script>

<style scoped lang='less'>
.randoms-container {
  background-color: #fff;
  margin: 12px 10px;
  padding: 20px;
  border-radius: 5px;

  .random-form {
    display: flex;
    // align-content: center;
    // align-items: center;
    justify-content: space-between;
    /deep/.random-form-input{
      height: 32px;
      line-height: 32px;
      width: 200px;
    } 
    
  }
  

  .alert-info {
    margin-bottom: 20px;
  }
  .random-table{
    margin-bottom: 20px;
  }

  .random-pagination{
    display: flex;
    justify-content: flex-end;
   /deep/.random-questions{
      color: blue;
      display: block;
    }
    .el-table_1_column_3>.cell {
      color: blue;
      
    }
  }
  
  .preview-random-dialog-footer {
    display: flex;
    justify-content: center;
  }
  .preview-random-dialog {
    .common-row{
      line-height: 36px;
    }
  }
  .preview-checkbox {
    width: 100%;
    // margin: 3px 0 ;
  }
  /deep/.reference-answer {
    width: 400px;
    height: 300px;
    display: flex;
    // justify-content: center;
    align-items: center;
    // .reference-video{
    //   padding: 40px 0;
    // }
  }
  .preview-question-link {
    color:#00f
  }
  .disabled-pointed{
    pointer-events: none;
  }
}

</style>
